<template>
  <div class="ranklist" v-if="ranklist.length !== 0 && singer.length !== 0">
    <!-- 飙升榜 -->
    <ch-soaringrank
      :rank-id="ranklist[0].id"
      :title="['飙', '升榜']"
      :bg-color="['#56a1e3', '#5a8beb']"
    />
    <!-- 新歌榜 -->
    <ch-newmusicrank
      :rank-id="ranklist[1].id"
      :title="['新', '歌榜']"
      :bg-color="['#34aabe', '#56c2cd']"
    />
    <!-- 歌曲榜 -->
    <ch-songrank
      :rank-id="ranklist[2].id"
      :title="['原', '创榜']"
      :bg-color="['#d53d6a', '#eb638d']"
    />
    <!-- 热歌榜 -->
    <ch-hotrank
      :rank-id="ranklist[3].id"
      :title="['热', '歌榜']"
      :bg-color="['#c7523c', '#cc7455']"
    />
    <ch-singer
      :rank-id="ranklist[3].id"
      :singer="singer"
      :title="['歌', '手榜']"
      :singerTime="singerTime"
      :bg-color="['#8533FF', '#9955FF']"
    />
  </div>
</template>

<script>
import SoaringRank from "@/components/common/officialrank";
import NewMusicRank from "@/components/common/officialrank";
import SongRank from "@/components/common/officialrank";
import HotRank from "@/components/common/officialrank";
import Singer from "@/components/common/officialrank";
import { getToplist } from "@/api/index.js";
import { getToplistArtist } from "@/api/singer.js";
export default {
  name: "ranklist",
  components: {
    "ch-soaringrank": SoaringRank,
    "ch-newmusicrank": NewMusicRank,
    "ch-songrank": SongRank,
    "ch-hotrank": HotRank,
    "ch-singer": Singer
  },
  props: {},
  data() {
    return {
      ranklist: [],
      singer: [],
      singerTime: "" // 歌手排行榜的更新时间
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getToplist();
    this.getToplistArtist();
  },
  mounted() {},
  methods: {
    async getToplist() {
      this.showLoading();
      const { data } = await getToplist();
      if (data.code === 200) {
        this.closeLoading();
        this.ranklist = data.list.slice(0, 4);
      }
    },
    async getToplistArtist() {
      this.showLoading();
      const { data } = await getToplistArtist();
      if (data.code === 200) {
        this.closeLoading();
      }
      this.singer = data.list.artists.splice(0, 10);
      this.singerTime = data.list.updateTime;
    }
  }
};
</script>

<style scoped lang="scss">
.ranklist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 1.875rem;
  .officialrank {
    width: 30%;
    margin-right: 3.33%;
  }
}
</style>
